<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <link rel="stylesheet" href="/web/css/reset.css">
  <link rel="stylesheet" href="/web/css/head.css" />

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="/web/css/news.css">
  <title>新闻动态</title>
</head>

<body>
  <div id="app">
    <!-- 导航 -->
    <header class="header">
      <div class="container clearfix">
        <div class="fl left">
          <a href="javascript:void(0)"><img src="/web/images/logo.png" alt="" class="img1" /></a>
        </div>
        <div class="fr nav">
          <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
            <li>
              <a href="/index.html">首页</a>
            </li>
            <li class="dropdown">
              <a href="/pro.html">
                产品服务
              </a>
            </li>
            <li class="dropdown">
              <a href="/science.html">普联科技</a>
            </li>
            <li class="header-active">
              <a href="/news.html">新闻动态</a>
            </li>
            <li>
              <a href="/help.html">帮助与支持</a>
            </li>
            <li>
              <a href="/about.html">关于我们</a>
            </li>
          </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
          <span></span>
        </a>
      </div>
    </header>
    <div class="banner">
      <img src="/web/images/news/xinwen-bgc_01.png" alt="">
    </div>


    <!-- 内容  -->
    <div class="content-wrapper">
      <div class="news-container">
        <div class="news-left">
          <ul>
            <li class="news-title-li" :class="{ 'active': isActive }" @click="clickTab(1)">
              <div class="gang"></div>
              <div class="left-title">公司动态</div>
              <p><i class="right"></i></p>
            </li>
            <li class="news-title-li" :class="{ 'active': !isActive }" @click="clickTab(2)">
              <div class=" gang"></div>
              <div class="left-title">行业资讯</div>
              <p><i class="right"></i></p>
            </li>
          </ul>
        </div>
        <div class="news-right">
          <div class="r-world">
            <h4>{{tabTitle}}</h4>
            <div class="r-gang"></div>
            <ul class="content-ul">
              <li class="title-li" v-for="(item,index) in table.tableData" :key="index">

                <div class="title-left">
                  <a :href="item.url"><span>{{item.title}}</span> </div></a>
                <div class="time">{{item.time}}</div>
              </li>
            </ul>
            <el-pagination class='page' background @current-change="currentChangeHandle"
              :current-page="table.currentPage" :page-size="table.pageSize" layout="prev, pager, next,jumper"
              :total="table.rowCount"></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <div class="common-footer">
      <div class="footer_lxwm">
        <ul class="wbsx">
          <li><img src="/web/images/sy/footer_wb.png">
            <p>企业微博</p>
          </li>
          <li><img src="/web/images/sy/footer_gzh.png">
            <p>企业公众号</p>
          </li>
          <li><img src="/web/images/sy/footer_dy.png">
            <p>抖音二维码</p>
          </li>
        </ul>
        <a href="javascript:void(0);"><img src="/web/images/sy/footer_bt.png"></a>

      </div>
      <div class="lxfs_box">
        <span class="sb_1"><img src="/web/images/sy/footer_icon_dianhua.png">电话：4000-365-108</span>
        <span class="sb_1"><img src="/web/images/sy/footer_icon_mail.png">邮箱：business@puldw.com</span>
        <span class="sb_1"><img src="/web/images/sy/footer_icon_dizhi.png">地址：武汉市江汉经济开发区江兴路17号A栋3楼02号(中信大楼)</span>
        <p><img src="/web/images/sy/footer_icon_banquan.png">版权所有 2018-2020 武汉普联东文数据服务有限责任公司 · 鄂ICP备17023599号-2</p>

      </div>
    </div>

  </div>
</body>
<script src="/web/js/jquery.min.js"></script>
<script src="/web/js/news.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      table: {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        rowCount: 0
      },
      isActive: true,
      tabTitle: ""

    },
    mounted() {

      this.getTableData();
    },
    methods: {

        clickTab(value){
            if(value==1){
                this.isActive = true;
            }else if(value==2){
                this.isActive = false;
            }
            this.table.currentPage = 1;
            this.getTableData();
        },

      //翻页
      currentChangeHandle(currentPage) {
        this.table.currentPage = currentPage;
        console.log(currentPage);
        this.getTableData();
      },
      getTableData() {
        let p = {};
        let _url = '/webApi/newsList';
        p.start = (this.table.currentPage - 1) * this.table.pageSize;
        p.num = this.table.pageSize;
        if(this.isActive){
            p.newsType = 1;
        }else{
            p.newsType = 2;
        }
        var that = this;
        console.log(p);
        $.ajax({
        type: 'POST',
        url: _url,
        data: p,
        success: function (res) {
            console.log(res);
            that.table.tableData = res.data.rows;
            that.table.rowCount = res.data.total;
            console.log(that.table.tableData);
        }
      });
      }
    },
    watch: {
      isActive: {
        handler: function (val, oVal) {
          console.log(val)
          this.tabTitle = val ? '公司动态' : '行业资讯';
        },
        immediate: true

      }
    }
  })

</script>

</html>
